<template>
  <n-flex class="p-[4px_10px_0px_8px]">
    <n-scrollbar style="max-height: calc(100vh - 220px)">
      <div
        class="item-box w-full h-75px mb-5px"
        v-for="item in groupChatList"
        :key="item.groupID"
        :class="{ active: activeItem === item.groupID }"
        @click="handleClick(item, 'group')"
      >
        <n-flex align="center" :size="10" class="h-75px pl-6px pr-8px flex-1 truncate">
          <n-avatar
            style="border: 1px solid var(--avatar-border-color)"
            :size="44"
            :src="item.avatar || '/logo.png'"
            fallback-src="/logo.png"
            round />

          <span class="text-14px leading-tight flex-1 truncate">{{ item.name }}</span>
        </n-flex>
      </div>
    </n-scrollbar>
  </n-flex>
</template>
<script setup lang="ts" name="friendsList">
import { useMitt } from '@/hooks/useMitt.ts'
import { MittEnum } from '@/enums'
import { useTencentGroupStore } from '@/stores/tencentGroupStore.ts'

/** 建议把此状态存入localStorage中 */
const activeItem = ref('')
const detailsShow = ref(false)
const shrinkStatus = ref(false)
const tencentGroupStore = useTencentGroupStore()

/** 群聊列表 */
const groupChatList = computed(() => tencentGroupStore.groupList)

/** 监听独立窗口关闭事件 */
watchEffect(() => {
  useMitt.on(MittEnum.SHRINK_WINDOW, async (event) => {
    shrinkStatus.value = event as boolean
  })
})

const handleClick = (item: any, type: string) => {
  detailsShow.value = true
  activeItem.value = item.groupID
  const data = {
    context: {
      type: type,
      uid: item.groupID,
      data: item
    },
    detailsShow: detailsShow.value
  }
  useMitt.emit(MittEnum.DETAILS_SHOW, data)
}

onBeforeMount(() => {
  // tencentGroupStore.getGroupList()
})

onUnmounted(() => {
  detailsShow.value = false
  useMitt.emit(MittEnum.DETAILS_SHOW, detailsShow.value)
})
</script>

<style scoped lang="scss">
.item-box {
  color: var(--text-color);
  .text {
    color: #808080;
  }
  &:not(.active):hover {
    background: var(--bg-msg-hover);
    border-radius: 12px;
    cursor: pointer;
  }
}

.active {
  background: var(--msg-active-color);
  border-radius: 12px;
  color: #fff;
  .text {
    color: #fff;
  }
}

:deep(.n-collapse .n-collapse-item:not(:first-child)) {
  border: none;
}
:deep(.n-collapse .n-collapse-item) {
  margin: 6px 0 0;
}
</style>
